<template>
  <div class="mui-numbox" data-numbox-min="1" data-numbox-max="9" data-numbox-step="1">
    <!-- 我们不知道什么时候能拿到max值 但是 总会有一刻 会得到一个真正的max值 -->
    <!-- 我们可以使用 watch 属性监听 来监听父组件传递过来的max值 不管watch会被触发几次 但是最后一次 肯定是一个合法的max数值  -->
    <!-- <div class="mui-numbox" data-numbox-min="1" data-numbox-step="1"> -->
    <button class="mui-btn mui-btn-numbox-minus" type="button" disabled>-</button>
    <input id="test" class="mui-input-numbox" type="number" value="1" @change="countChange" ref="numbox">
    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
  </div>
  <!-- 分析 子组件什么时候把数据传给父组件 -->
</template>
<script>
import mui from "../../lib/mui/js/mui.min.js"
export default {
  mounted() {
    // 初始化数字选择框 官方文档提供的API
    mui(".mui-numbox").numbox()
    
  },
  methods:{
    countChange(){
      // 每当文本框数据被修改的时候 立即把最新的数据 通过事件调用 传递给父组件
      // console.log(this.$refs.numbox.value)
      this.$emit('getcount',parseInt(this.$refs.numbox.value))
    }
  },
  props:['max'],
  watch:{
    'max':function(newval,oldval){
      // 使用jsAPI 设置numbox最大值
      mui('.mui-numbox').numbox().setOption('max',newval)
    }
  }
};
</script>
<style lang="scss" scoped>
</style>

